<template>
  <div class="home" @scroll="scroll">
    <cols-Header class="border fixed" v-show="show"></cols-Header>
    <div class="content">
      <!-- 按钮 -->
      <!-- <my-button type="primary">点击</my-button>
      <my-button type="danger">删除</my-button>
      <my-button type="warn">编辑</my-button>
      <my-button>保存</my-button>-->

      <!-- input -->
      <!-- <my-Input v-model="content" type="password" placeholder="请输入账号"></my-Input>
      <p>{{content}}</p>-->

      <!-- 轮播图 -->
      <!-- <my-Swiper :banners="banners"></my-Swiper> -->
    </div>
  </div>
</template>

<script>
import { getBanners } from "../utils/api/home";
import colsHeader from "@/components/colsHeader/colsHeader";
import myButton from "@/components/myButton/myButton";
import myInput from "@/components/myInput/myInput";
import mySwiper from "@/components/mySwiper/mySwiper";

export default {
  name: "Home",
  data() {
    return {
      show: false,
      content: "",
      banners: [],
    };
  },
  created() {
    this.$loading.show();
    getBanners().then((res) => {
      this.banners = res;
      setTimeout(() => {
           this.$loading.hide();
      }, 3000);
    });
  },
  components: {
    colsHeader,
    myButton,
    myInput,
    mySwiper,
  },
  methods: {
    scroll(e) {
      this.show = e.target.scrollTop > 400 ? true : false;
    },
  },
};
</script> 
<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
  overflow: auto;
  .content {
    height: 2000px;
    // background-image: linear-gradient(red, black, yellow, blue);
  }
  .fixed {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
  }
}
</style>

 i